<template lang="pug">
div(v-if="!item.meta || !item.meta.hidden" :class="['menu-wrapper', collapse ? 'simple-mode': 'full-mode', {'first-level': !isNest}]")
  template(v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.meta.noShowingChildren)")
    app-link(:to="resolvePath(onlyOneChild.path)")
      el-menu-item(:index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}")
        svg-icon(v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :name="onlyOneChild.meta.icon" color="white")
        svg-icon(v-else-if="item.meta && item.meta.icon" :name="item.meta.icon" color="white")
        span(v-if="onlyOneChild.meta && onlyOneChild.meta.title" slot="title") {{ onlyOneChild.meta.title }}
        span(v-else-if="item.meta && item.meta.title" slot="title") {{ item.meta.title }}
  el-submenu(v-else :index="resolvePath(item.path)" popper-append-to-body)
    template(slot="title")
      svg-icon(v-if="item.meta && item.meta.icon" :name="item.meta.icon" color="white")
      span(v-if="item.meta && item.meta.title && !collapse" slot="title") {{ item.meta.title }}
    sidebar-item(v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" :collapse="collapse" class="nest-menu")
</template>

<script lang="ts">
import path from "path";
import { Route } from "vue-router";
import { isExternal } from "../../../util/validate";
import { Component, Vue, Prop } from "vue-property-decorator";
import AppLink from "./Link.vue";

@Component({
  name: "SidebarItem",
  components: {
    AppLink
  }
})
export default class SidebarItem extends Vue {
  @Prop({ required: true }) private item!: Route;
  @Prop({ default: false }) private isNest!: boolean;
  @Prop({ default: false }) private collapse!: boolean;
  @Prop({ default: "" }) private basePath!: string;

  private onlyOneChild: Route | null = null;

  private hasOneShowingChild(children: Route[], parent: Route) {
    let showingChildren: Route[] = [];

    if (children) {
      showingChildren = children.filter((item: Route) => {
        if (item.meta && item.meta.hidden) {
          return false;
        } else {
          this.onlyOneChild = item;
          return true;
        }
      });
    }

    if (showingChildren.length === 1) {
      return true;
    } else if (showingChildren.length === 0) {
      this.onlyOneChild = {
        ...parent,
        path: "",
        meta: { noShowingChildren: true }
      };
      return true;
    }

    this.onlyOneChild = null;
    return false;
  }

  private resolvePath(routePath: string) {
    if (isExternal(routePath)) {
      return routePath;
    }
    return path.resolve(this.basePath, routePath);
  }
}
</script>

<style lang="scss">
$sideBarWidth: 180px;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$subMenuActiveText: #f4f4f5;

/* Login page */
$loginBg: #2d3a4b;
$lightGray: #eee;
$darkGray: #889aa4;

.el-submenu.is-active > .el-submenu__title {
  color: $subMenuActiveText !important;
}

.full-mode {
  .nest-menu .el-submenu > .el-submenu__title,
  .el-submenu .el-menu-item {
    background-color: $subMenuBg !important;

    &:hover {
      background-color: $subMenuHover !important;
    }
  }
  .el-submenu__icon-arrow {
    top: 52%;
    right: 3px;
  }
}

.simple-mode {
  &.first-level {
    .submenu-title-noDropdown {
      padding-left: 10px !important;
      position: relative;

      .el-tooltip {
        padding: 0 10px !important;
      }
    }

    .el-submenu {
      overflow: hidden;

      & > .el-submenu__title {
        padding-left: 5px !important;

        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.svg-icon {
  margin-right: 16px;
  color:#fff;
}
</style>
